import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../controllers/video_topic_detail_controller.dart';
import '../widgets/topic_detail_list_view.dart';

class VideoTopicDetailPage extends GetView<VideoTopicDetailController> {
  const VideoTopicDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Obx(() => controller.isLoadingData.value
            ? SizedBox.shrink()
            : Text(
                controller.topicDetailModel.brief,
                maxLines: 1,
              )),
      ),
      body: Obx(() {
        if (controller.isLoadingData.value) {
          return Center(
            child: Container(
              margin: const EdgeInsets.all(8.0),
              width: 64.0,
              height: 64.0,
              child: const CircularProgressIndicator(),
            ),
          );
        } else {
          return NotificationListener<ScrollNotification>(
            onNotification: (ScrollNotification notification) {
              if (notification is ScrollStartNotification) {
                //controller.stopPlay();
              } else if (notification is ScrollEndNotification) {
                final RenderBox box = context.findRenderObject() as RenderBox;
                final Offset offset = box.localToGlobal(Offset.zero);
                final double center = offset.dy + (box.size.height / 2);

                final len = controller.topicDetailModel.itemList?.length ?? 0;
                for (int i = 0; i < len; i++) {
                  final RenderBox? itemBox = controller.itemKeys[i].currentContext?.findRenderObject() as RenderBox?;
                  if (itemBox != null) {
                    final Offset itemOffset = itemBox.localToGlobal(Offset.zero);
                    final double itemTop = itemOffset.dy;
                    final double itemBottom = itemTop + itemBox.size.height;

                    if (center >= itemTop && center <= itemBottom) {
                      controller.playVideo(i);
                      break;
                    }
                  }
                }
              }
              return true;
            },
            child: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: Column(
                    children: [
                      Stack(
                        alignment: Alignment.center,
                        clipBehavior: Clip.none,
                        children: [
                          CachedNetworkImage(
                            width: double.infinity,
                            height: 200,
                            fadeInDuration: const Duration(seconds: 0),
                            fadeOutDuration: const Duration(seconds: 0),
                            fit: BoxFit.cover,
                            imageUrl: controller.topicDetailModel.headerImage,
                            placeholder: (context, url) {
                              return Image.asset(
                                "assets/images/placeholder.png",
                                fit: BoxFit.cover,
                              );
                            },
                          ),
                          Positioned(
                            bottom: -60,
                            left: 20,
                            right: 20,
                            child: Container(
                              height: 80,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(6),
                                border: Border.all(color: Colors.black.withAlpha(15), width: 1),
                              ),
                              child: Center(
                                child: Text(
                                  controller.topicDetailModel.brief,
                                  textAlign: TextAlign.center,
                                  style: TextStyle(color: Colors.black, fontSize: 15),
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20, top: 80, right: 20, bottom: 0),
                        child: Text(
                          controller.topicDetailModel.text,
                          style: TextStyle(color: Colors.black54, fontSize: 12),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 15),
                        height: 4,
                        width: double.infinity,
                        color: Colors.black12,
                      )
                    ],
                  ),
                ),
                // Sliver List
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      final len = controller.topicDetailModel.itemList?.length ?? 0;
                      if (index == len) {
                        return SizedBox(
                          height: 200,
                          child: Center(
                            child: Text(
                              "-The End-",
                              style: TextStyle(fontSize: 24, fontFamily: 'AkzidenzGrotesk'),
                            ),
                          ),
                        );
                      }
                      return TopicDetailListView(
                        key: controller.itemKeys[index],
                        item: controller.topicDetailModel.itemList![index],
                      );
                    },
                    childCount: (controller.topicDetailModel.itemList?.length ?? 0) + 1,
                  ),
                ),
              ],
            ),
          );
        }
      }),
    );
  }
}
